<template>
  <div class="personal music-cpns-common">
    <div class="top">
      <div class="day" :style="{ borderColor: bcColor, color: bcColor }">
        <div class="horn h-left" :style="{ backgroundColor: bcColor }"></div>
        <div class="horn h-right" :style="{ backgroundColor: bcColor }"></div>
        <div class="line" :style="{ backgroundColor: bcColor }"></div>
        <span>{{ day }}</span>
      </div>
      <div class="title">
        <h3>每日歌曲推荐</h3>
        <span>根据你的音乐口味生成,每天6.00更新</span>
      </div>
    </div>
    <div class="songstable" style="width: 90%; margintop: 20px">
      <page-music-table
        :contentTableConfig="contentTableConfig"
        :dataList="songsList"
        :lookShow="false"
        :propName="propName"
        @hanelDbPlay="hanelDbPlay"
      >
        <template #doing="scope">
          <a href="#" @click.prevent.stop="addCollect(scope.row)">
            <el-icon v-show="!scope.row.flag" class="table-icon"
              ><star
            /></el-icon>
            <el-icon v-show="scope.row.flag" class="table-icon"
              ><star-filled
            /></el-icon>
          </a>
          <a href="#" @click.prevent.stop="startDown(scope.row)">
            <el-icon class="table-icon"><download /></el-icon>
          </a>
        </template>
      </page-music-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { getDaySong } from '@/service/personality'
import { contentTableConfig } from '../config/table-config'

const store = useStore()
const propName = { time: 'dt', artists: 'ar', album: 'al' }
const day = new Date().getDate()
const bcColor = computed(() => store.state.theme.bcColor)
const id = store.getters['login/getUserId']
const songsList: any = ref([])
const getSongs = (id: number) => {
  getDaySong(id).then((res: any) => {
    // songsList.value = res.data.dailySongs
    const arr = [...res.data.dailySongs]
    arr.map((item) => {
      item.flag = false
    })
    songsList.value = arr
  })
}
getSongs(id)
// 接收到点击了该歌单里的音乐开始播放
const likeFlag = ref(false)
const hanelDbPlay = () => {
  store.commit('music/updateMusicList', songsList.value)
}
// 收藏
const addCollect = (obj: any) => {
  obj.flag = !obj.flag
  store.dispatch('down/pullLike', { id: obj.id, like: obj.flag })
}
// 下载
const startDown = (item: any) => {
  store.dispatch('down/downMusic', item)
}
</script>

<style scoped lang="less">
.personal {
  width: 97%;
  margin: 0 auto;
  color: #333;
  .songstable {
    position: relative;
    width: 90%;
    margin: 0 auto;
  }
  .top {
    margin: 20px 0px;
    margin-top: 30px;
    padding-left: 30px;
    display: flex;
    align-items: center;

    .day {
      margin-right: 15px;
      width: 80px;
      height: 70px;
      position: relative;
      border: 4px solid #333;
      border-radius: 14px;
      display: flex;
      justify-content: center;
      line-height: 84px;
      .horn {
        position: absolute;
        width: 4px;
        height: 14px;
        border-radius: 3px;
        top: -8px;
      }
      .h-left {
        left: 15px;
      }
      .h-right {
        right: 15px;
      }
      .line {
        position: absolute;
        top: 13px;
        left: 5px;
        width: 68px;
        height: 4px;
        border-radius: 3px;
      }
      span {
        font-size: 36px;
        font-weight: bold;
      }
    }
    .title {
      span {
        font-size: 15px;
      }
      h3 {
        margin: 5px 0px;
      }
    }
  }
}
</style>
